<template>
  <div class="finance-container">
    <!-- 我的融资意向 -->
    <div class="finance-section">
      <div class="section-header">
        <h3 class="section-title">我的融资意向</h3>
        <el-button
          type="success"
          size="medium"
          @click="toggleIntentionView"
          v-if="allIntentionData.length > 0">
          {{ look ? '隐藏意向' : '查看意向' }}
        </el-button>
        <el-button
          type="success"
          size="medium"
          @click="handleAdd"
          v-else>
          添加融资意向
        </el-button>
      </div>

      <!-- 意向列表 -->
      <div v-if="look" class="intention-list">
        <el-card
          v-for="(item, index) in allIntentionData"
          :key="index"
          class="intention-card"
          shadow="hover">
          
          <div class="intention-content">
            <div class="intention-field">
              <i class="el-icon-user"></i>
              <span>姓名：{{ item.realName }}</span>
            </div>
            <div class="intention-field">
              <i class="el-icon-location-outline"></i>
              <span>地址：{{ item.address }}</span>
            </div>
            <div class="intention-field">
              <i class="el-icon-phone"></i>
              <span>联系方式：{{ item.phone }}</span>
            </div>
            <div class="intention-field">
              <i class="el-icon-money"></i>
              <span>金额：{{ item.amount }} 万元</span>
            </div>
            <div class="intention-field">
              <i class="el-icon-document"></i>
              <span>用途：{{ item.application }}</span>
            </div>
            <div class="intention-field">
              <i class="el-icon-goods"></i>
              <span>农作物：{{ item.item }}</span>
            </div>
            <div class="intention-field">
              <i class="el-icon-map-location"></i>
              <span>种植面积：{{ item.area }} 亩</span>
            </div>
            <div class="intention-field">
              <i class="el-icon-time"></i>
              <span>借款期：{{ item.repaymentPeriod }} 个月</span>
            </div>
          </div>

          <div class="intention-actions">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click.stop="handleEdit(item)">
              编辑
            </el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              @click.stop="handleDel(item)"
              style="color: #F56C6C">
              删除
            </el-button>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 添加/编辑意向对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="showAdd"
      width="600px"
      :close-on-click-modal="false">
      
      <el-form
        :model="intentionData"
        ref="intentionForm"
        label-width="120px"
        class="intention-form">
        
        <el-form-item label="姓名：" prop="realName">
          <el-input v-model="intentionData.realName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        
        <el-form-item label="金额(万元)：" prop="amount" required>
          <el-input-number
            v-model="intentionData.amount"
            :min="0"
            :precision="2"
            controls-position="right"
            class="amount-input">
          </el-input-number>
        </el-form-item>
        
        <el-form-item label="联系方式：" prop="phone" required>
          <el-input v-model="intentionData.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        
        <el-form-item label="用途：" prop="application" required>
          <el-input v-model="intentionData.application" placeholder="请输入资金用途"></el-input>
        </el-form-item>
        
        <el-form-item label="农作物：" prop="item" required>
          <el-input v-model="intentionData.item" placeholder="请输入农作物名称"></el-input>
        </el-form-item>
        
        <el-form-item label="种植面积(亩)：" prop="area" required>
          <el-input-number
            v-model="intentionData.area"
            :min="0"
            :precision="2"
            controls-position="right"
            class="area-input">
          </el-input-number>
        </el-form-item>
        
        <el-form-item label="借款期：" prop="repaymentPeriod" required>
          <el-select
            v-model="value"
            placeholder="请选择借款期限"
            class="period-select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="住址：" prop="address" required>
          <el-input
            v-model="intentionData.address"
            placeholder="请输入详细地址"
            type="textarea"
            :rows="2">
          </el-input>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAdd">取消</el-button>
        <el-button type="success" @click="updateIntention">确认</el-button>
      </div>
    </el-dialog>

    <!-- 推荐融资人 -->
    <div class="finance-section">
      <h3 class="section-title">推荐融资人</h3>
      
      <div class="recommend-list">
        <el-card
          v-for="(item, index) in allRecommendData"
          :key="index"
          class="recommend-card"
          shadow="hover"
          @click.native="detailsClick(item.userName)">
          
          <div class="recommend-avatar">
            <el-avatar
              :size="80"
              :src="item.avatar ? $store.state.imgShowRoad + '/file/' + item.avatar : require('../assets/img/wutu.gif')">
            </el-avatar>
          </div>
          
          <div class="recommend-info">
            <div class="info-field">
              <i class="el-icon-user"></i>
              <span>{{ item.realName }}</span>
            </div>
            <div class="info-field">
              <i class="el-icon-phone"></i>
              <span>{{ item.phone }}</span>
            </div>
            <div class="info-field">
              <i class="el-icon-location-outline"></i>
              <span>{{ item.address }}</span>
            </div>
            <div class="info-field">
              <i class="el-icon-goods"></i>
              <span>{{ item.item }}</span>
            </div>
            <div class="info-field">
              <i class="el-icon-money"></i>
              <span>{{ item.amount !== -1 ? item.amount + '万元' : '-' }}</span>
            </div>
            <div class="info-field">
              <i class="el-icon-map-location"></i>
              <span>{{ item.area !== -1 ? item.area + '亩' : '-' }}</span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {
  selectIntention,
  insertIntention,
  updateIntention,
  deleteIntention,
  selectRecommned
} from "../api/finance";

export default {
  data() {
    return {
      options: [
        { value: 6, label: "六个月" },
        { value: 12, label: "一年" },
        { value: 24, label: "两年" },
        { value: 36, label: "三年" }
      ],
      value: "",
      intentionData: {
        realName: "",
        amount: "",
        application: "",
        item: "",
        repaymentPeriod: "",
        address: "",
        area: "",
        phone: ""
      },
      allIntentionData: [],
      allRecommendData: [],
      showAdd: false,
      look: false,
      title: "添加融资意向"
    };
  },
  methods: {
    // 获取推荐融资人
    getAllRecommned() {
      selectRecommned()
        .then(res => {
          if (res.flag) {
            this.allRecommendData = res.data;
          } else {
            this.allRecommendData = [];
          }
        })
        .catch(err => {
          console.error(err);
          this.$message.error("获取推荐融资人失败");
        });
    },
    
    // 获取融资意向
    getAllIntention() {
      selectIntention()
        .then(res => {
          if (res.flag) {
            this.allIntentionData = res.data;
          } else {
            this.$message.error("请先登录");
            this.$router.push("/login");
          }
        })
        .catch(err => {
          console.error(err);
          this.$message.error("获取融资意向失败");
        });
    },
    
    // 切换意向视图
    toggleIntentionView() {
      this.look = !this.look;
    },
    
    // 添加意向
    handleAdd() {
      this.title = "添加融资意向";
      this.intentionData = {
        realName: "",
        amount: "",
        application: "",
        item: "",
        repaymentPeriod: "",
        address: "",
        area: "",
        phone: ""
      };
      this.value = "";
      this.showAdd = true;
    },
    
    // 关闭对话框
    closeAdd() {
      this.showAdd = false;
    },
    
    // 更新意向
    updateIntention() {
      // 验证表单
      if (!this.validateForm()) return;
      
      const params = {
        ...this.intentionData,
        repaymentPeriod: this.value
      };
      
      const action = this.title === "编辑意向" ? updateIntention : insertIntention;
      
      action(params)
        .then(res => {
          if (res.flag) {
            this.$message.success(res.message);
            this.getAllIntention();
            this.getAllRecommned();
            this.showAdd = false;
          } else {
            this.$message.error(res.data);
          }
        })
        .catch(err => {
          console.error(err);
          this.$message.error("操作失败");
        });
    },
    
    // 表单验证
    validateForm() {
      const requiredFields = [
        { field: "realName", message: "请输入姓名" },
        { field: "amount", message: "请输入金额" },
        { field: "phone", message: "请输入联系方式" },
        { field: "application", message: "请输入用途" },
        { field: "item", message: "请输入农作物名称" },
        { field: "area", message: "请输入种植面积" },
        { field: "address", message: "请输入住址" }
      ];
      
      for (const { field, message } of requiredFields) {
        if (!this.intentionData[field]) {
          this.$message.warning(message);
          return false;
        }
      }
      
      if (!this.value) {
        this.$message.warning("请选择借款期限");
        return false;
      }
      
      return true;
    },
    
    // 编辑意向
    handleEdit(item) {
      this.title = "编辑意向";
      this.intentionData = { ...item };
      this.value = item.repaymentPeriod;
      this.showAdd = true;
    },
    
    // 删除意向
    handleDel(item) {
      this.$confirm("确认删除该融资意向?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteIntention({ id: item.id })
            .then(res => {
              if (res.flag) {
                this.$message.success("删除成功");
                this.getAllIntention();
                this.getAllRecommned();
              } else {
                this.$message.error(res.message);
              }
            })
            .catch(err => {
              console.error(err);
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    
    // 查看详情
    detailsClick(userName) {
      this.$router.push(`/user/profile/${userName}`);
    }
  },
  created() {
    this.getAllIntention();
    this.getAllRecommned();
  }
};
</script>

<style lang="less" scoped>
.finance-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  
  .finance-section {
    margin-bottom: 30px;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #e6e6e6;
      
      .section-title {
        margin: 0;
        font-size: 18px;
        color: #303133;
      }
    }
  }
  
  .intention-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 20px;
  }
  
  .intention-card {
    border-radius: 6px;
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .intention-content {
      .intention-field {
        margin-bottom: 10px;
        font-size: 14px;
        color: #606266;
        
        i {
          margin-right: 8px;
          color: #67C23A;
        }
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    
    .intention-actions {
      margin-top: 15px;
      text-align: right;
      
      .el-button {
        margin-left: 15px;
      }
    }
  }
  
  .recommend-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
  
  .recommend-card {
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .recommend-avatar {
      text-align: center;
      margin-bottom: 15px;
    }
    
    .recommend-info {
      .info-field {
        margin-bottom: 8px;
        font-size: 14px;
        color: #606266;
        
        i {
          margin-right: 8px;
          color: #67C23A;
        }
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  
  .intention-form {
    .amount-input, .area-input {
      width: 200px;
    }
    
    .period-select {
      width: 100%;
    }
  }
  
  .dialog-footer {
    text-align: right;
  }
}
</style>